<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>无边框 select</title>
    <style>
      .clean-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        border: none;
        outline: none;
        background: transparent;
        border-radius: 0;

        font-size: 16px;
        color: #13d2ff;
        padding: 4px 22px 4px 4px; /* 右侧给自定义箭头留空 */
        cursor: pointer;
      }

      .select-wrapper {
        position: relative;
        display: inline-block;
      }
      .select-wrapper::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12px; /* 按需 */
        height: 6px;
        background: url("./img/arrow.png") no-repeat center / contain;
        pointer-events: none;
      }

      .clean-select:active,
      .clean-select:focus {
        background: rgba(10, 25, 48, 0.8); /* ← 换成你吸到的背景色 */
        color: #fff; /* ← 换成你吸到的文字色 */
      }
    </style>
  </head>
  <body>
    <div class="select-wrapper">
      <select class="clean-select">
        <option>2022</option>
        <option>2023</option>
        <option>2024</option>
        <option>2025</option>
      </select>
    </div>
  </body>
</html>
